<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例一：左侧菜单</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{font: 14px/1.5 "Microsoft YaHei";background: #252525}
        .menu{width: 40px;margin-top: 100px;margin-left: 100px;}
        .menu li{height: 40px;margin: 5px 0;background: url("images/4-1.png") no-repeat;list-style: none;}
        .menu .nav1{background-position: -80px -280px;}
        .menu .nav2{background-position: -0px -200px;}
        .menu .nav3{background-position: -0px -240px;}
        .menu .nav4{background-position: -0px -320px;}
        .menu .nav5{background-position: -0px -280px;}
    </style>
</head>
<body>
<!--网页主体-->
<ul class="menu">
    <li class="nav1"></li>
    <li class="nav2"></li>
    <li class="nav3"></li>
    <li class="nav4"></li>
    <li class="nav5"></li>
</ul>
</body>
</html>